<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<script type="text/javascript" src="../js/prototype.js"></script>
<script language="JavaScript">
var examNameExist = false;
function isNameExist(){
	var examName = $('exam_name').value;
	new Ajax.Request('/isExamNameExist.do?exam_name='+examName,   
			{     method:'get',     
				  onSuccess: function(transport)
					{       
						var response = transport.responseText || "no response text";
						if(response=="TRUE"){
							examNameExist=  true;
							$('examNameId').innerHTML = "Exam name exist!"
							$('examNameId').style.display = "";	
						}else{
							examNameExist = false;
							$('examNameId').innerHTML="";
							$('examNameId').style.display = "none";	
						}
					},     
				  onFailure: function()
				    { 
						alert('Something went wrong...') 
					}   
			}
		); 
}

function availableQuestion(){
	var category = $('question_category_id_temp').value;
	var level = $('question_level_id_temp').value;
	if(category =="" || level=="" )
	{
		$('maxQuestion').value=0;
		return;
	}

	new Ajax.Request('/availableQuestions.do?category_id='+category+'&level_id='+level,   
			{     method:'get',     
				  onSuccess: function(transport)
					{       
						var response = transport.responseText || "no response text";						
						$('maxQuestion').value = response;
					},     
				  onFailure: function()
				    { 
						alert('Something went wrong...') 
					}   
			}
		); 
}
var addedQuestionArray = new Array();
var arrayIndex = 0;
var questionRowID= 1;
function addRow(obj){
	//var div = new Element('div', { 'id': 'hierarchyRow'+hierarchyRowID,'class':'empty'});
	var content = $('questionRow').innerHTML;
	//alert(content);	
	if($('question_category_id_temp').value==""){
		alert("Please select Category");
		$('question_category_id_temp').focus();
		return;
	}
	if($('question_level_id_temp').value==""){
		alert("Please select Question Level");
		$('question_level_id_temp').focus();
		return;
	}
	var pattern = /^[1-9]([0-9]*)$/;
	if(!pattern.test($('numberOfQuestion').value))
	{
		alert("Please enter number in Question Count greater then 0");
		$('numberOfQuestion').focus();
		return;
	}
	if($('maxQuestion').value==0){
		alert("Can not be added as Max Count of available questions is Zero");
		return;
	}
	if(parseInt($('numberOfQuestion').value) > parseInt($('maxQuestion').value)){
		alert("Question count can not be greater then Available Question");
		$('numberOfQuestion').focus();
		return;
	}

	content = content.replace(/rowId/,""+questionRowID);
	content = content.replace(/categoryValue/,$('question_category_id_temp').value);
	content = content.replace(/levelValue/,$('question_level_id_temp').value);
	content = content.replace(/questionCount/,$('numberOfQuestion').value);
	var categoryText = $('question_category_id_temp').options[$('question_category_id_temp').options.selectedIndex].text;
	var levelText = $('question_level_id_temp').options[$('question_level_id_temp').options.selectedIndex].text;

	content = content.replace(/question_level_id_remove_id/,"question_level_id"+questionRowID);
	content = content.replace(/question_category_id_remove_id/,"question_category_id"+questionRowID);
	var key = $('question_category_id_temp').value+$('question_level_id_temp').value ;
	if(addedQuestionArray[key] == "added"){
		alert("Similar category and level questions already Added");
		return;
	}
	else{
		addedQuestionArray[key]="added";
	}
	

	
	content = content.replace(/Category/,categoryText);
	content = content.replace(/QuestionLevel/,levelText);
	content = content.replace(/NumberOfQuestion/,$('numberOfQuestion').value);
	content = content.replace(/questionRowData/,"1");
	<logic:equal name="examForm" property="screen_type" value="">
	$('examList').style.display = "";	
	</logic:equal>
	content = content.replace(/<TBODY>/i,"");
	content = content.replace(/<\/TBODY>/i,"");
	questionRowID++;
	$(obj.id).insert({after:content});	
}
function removeRow(obj){	
	var key = $('question_category_id'+obj.id).value+$('question_level_id'+obj.id).value ;
	addedQuestionArray[key] = "";
	$(obj.id).up(1).remove();
	questionRowID--;
}
function fnSubmit()
{
	if($('exam_name').value.strip() == ""){
		alert('Exam Name is Mandatory');
		return false;
	}
	if(examNameExist){
		alert("Please enter Unique Exam Name");
		return;
	}
	if($('exam_time_hr').value.strip() == "0" && $('exam_time_min').value.strip() == "0"){
		alert('Exam Duration is mandatory');
		return;
	}
	var pattern = /^[1-9]([0-9]*)$/;
	if(!pattern.test($('passing_marks').value)){
		alert("Please enter Numeric value for passing marks");
		$('passing_marks').focus();
		return;
	}
	if(questionRowID==1){
		alert("Please Add Questions in Exam using Add button");
		return;
	}
	$('questionRowData').innerHTML="";
	document.examForm.action='/createExam.do?';
	document.examForm.submit();
}

function fnUpdate()
{
	$('questionRowData').innerHTML="";
	if(questionRowID==1){
		alert("Please Add Questions in Exam using Add button");
		return;
	}
	document.examForm.screen_type.value="Edit";
	document.examForm.action='/updateExam.do?';
	document.examForm.submit();
}
</script>
<html:form action="/exam" enctype="multipart/form-data">
	<html:hidden property="screen_type"/>
	<html:hidden property="exam_id"/>
	<html:hidden property="is_updatable" />
	<table width="550" border="0" align="center" cellspacing="0" cellpadding="0">
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<logic:equal name="examForm" property="screen_type" value="Edit">
				<td class="heading1">Edit Exam <logic:equal name="examForm" property="is_updatable" value="false">(Not Updatable)</logic:equal>.</td>
			</logic:equal>
			<logic:equal name="examForm" property="screen_type" value="View">
				<td class="heading1">View Exam</td>
			</logic:equal>
			<logic:equal name="examForm" property="screen_type" value="">
				<td class="heading1">Add Exam</td>
			</logic:equal>
		</tr>
		<tr>
			<td valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td valign="top"><jsp:include page="showErrorMessage.jsp" /></td>
		</tr>
		<tr>
			<td>
				<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td align="left" valign="top" class="inputtext">Name<font class="asterix">*</font></td>
						<logic:equal name="examForm" property="screen_type" value="">
							<td valign="middle"><input type="text" maxlength="30" name="exam_name" id="exam_name" class="form1" value='<bean:write name="examForm" property="exam_name"/>' onblur="javascript:isNameExist();"/><div id="examNameId" class="errorMsg" style="display:none;" ></div></td>
						</logic:equal>
						<logic:equal name="examForm" property="screen_type" value="View">
							<td valign="middle"><input type="text" maxlength="30" name="exam_name" id="exam_name" class="form1"
							value='<bean:write name="examForm" property="exam_name"/>' /></td>
						</logic:equal>
						<logic:equal name="examForm" property="screen_type" value="Edit">
							<td valign="middle"><input type="text" maxlength="30" name="exam_name" id="exam_name" class="form1"
							value='<bean:write name="examForm" property="exam_name"/>' readonly="readonly" /></td>
						</logic:equal>
					</tr>
					<tr>
						<td align="left" valign="top" class="inputtext">Description</td>
						<td valign="middle"><input type="text" maxlength="50" name="exam_description" id="exam_description" class="form1"
						value='<bean:write name="examForm" property="exam_description"/>'/></td>
					</tr>
					<tr>
						<td align="left" valign="top" class="inputtext">Duration(Hr:Min)<font class="asterix">*</font></td>
						<td valign="middle">
							<html:select styleClass="form8" styleId="exam_time_hr" property="exam_time_hr" style=":width=25%">
								<html:option value="0">00</html:option>
								<html:option value="1">01</html:option>
								<html:option value="2">02</html:option>
								<html:option value="3">03</html:option>
								<html:option value="4">04</html:option>
								<html:option value="5">05</html:option>
								<html:option value="6">06</html:option>
							</html:select>
							<html:select styleClass="form8" styleId="exam_time_min" property="exam_time_min" style=":width=25%">
								<html:option value="0">00</html:option>
								<html:option value="15">15</html:option>
								<html:option value="30">30</html:option>
								<html:option value="45">45</html:option>
							</html:select>
						</td>
					</tr>
					<tr>
						<td align="left" valign="top" class="inputtext">Passing Marks <font class="asterix">*</font></td>
						<td valign="middle"><input type="text" maxlength="50" name="passing_marks" id="passing_marks" class="form1"
						value='<bean:write name="examForm" property="passing_marks"/>'/></td>
					</tr>
					<tr>
						<td align="left" valign="top" class="inputtext">Status<font class="asterix">*</font></td>
						<td valign="middle">
							<html:select styleClass="form3" property="status" styleId="status" style=":width=25%">
								<html:option value="2">Active</html:option>
								<html:option value="3">InActive</html:option>
							</html:select>
						</td>
					</tr>
					<tr>
						<td height="25" colspan="4" valign="top"  >&nbsp;</td>
					</tr>
					<tr>
						<td colspan="3" class="heading2">Question Types</td>
					</tr>
					<tr>
						<td height="10" colspan="2" valign="top">&nbsp;</td>
					</tr>
					
						<logic:equal name="examForm" property="is_updatable" value="true">
						<tr>
						<td colspan="4" valign="top" >
						<table width="550" border="0" cellspacing="0" cellpadding="0" class="tbletext">
						
						<tr>
							<td align="left">Category</td><td align="left">Question Level</td><td align="left">Number Of Ques.</td><td>Max Ques.</td>
						</tr>
						<tr>
							<td align="left">
								<select name="question_category_id_temp"  id="question_category_id_temp" Class="form6" onclick= "javascript:availableQuestion();" onblur="javascript:availableQuestion();">
											<option value="">--Please Select--</option>
											<logic:present name="examForm" property="categories">
											<logic:iterate name="examForm" property="categories" id="category" >
											<bean:define id="dID" name="category" property="id" />
											<option  value="<%=dID.toString()%>"><bean:write name="category" property="name"/></option>						
											</logic:iterate>
											</logic:present>	
										</select>
							</td>
							<td align="left"> 
							<select name="question_level_id_temp" id="question_level_id_temp" class="form6" onclick= "javascript:availableQuestion();" onblur="javascript:availableQuestion();">
											<option value="">--Please Select--</option>
											<logic:present name="examForm" property="levels">
											<logic:iterate name="examForm" property="levels" id="level" >
											<bean:define id="dID" name="level" property="id" />
											<option  value="<%=dID.toString()%>"><bean:write name="level" property="name"/></option>						
											</logic:iterate>
											</logic:present>	
										</select>
							</td>
							<td align="left"><input type="text" name="numberOfQuestion" id="numberOfQuestion" class="form7"/></td>
							<td align="left"><input type="text" name="maxQuestion" id="maxQuestion" class="form7" readonly="true"/></td>
						</tr>
						<tr >
							<td height="25" colspan="4" align="center" valign="top">
								<input type="button" class="imageButton" id="addQuestionButton" value="Add" onClick="javascript:addRow($('refRow'))">
							</td>
						</tr>
							<tr >
									<td height="25" colspan="4" align="center" valign="top">
								</td>
								</tr>
							</table>
							</td>
						</tr>
						</logic:equal>

							<logic:notEqual name="examForm" property="screen_type" value="">
						<tr>
							<td colspan="4" valign="top" >
							<table width="550" border="0" cellspacing="0" cellpadding="0" class="tbletextTemp">
							
							<tr id="refRow">
								<td align="left">Category</td><td align="left">Question Level</td><td align="left">Number Of Ques.</td>
							</tr>
							<% int index=1;%>
							<logic:iterate name="examForm" property="examCategoryLevelMappingList" id="examCategoryLevelMappingVO" >
							<tr >

								<td >
								<logic:equal name="examForm" property="is_updatable" value="true">
								<img id="<%=index%>" src="images/minus.gif" onClick="javascript:removeRow(this);"/></logic:equal> <bean:write name="examCategoryLevelMappingVO" property="categoryType.name"/></td>
								<td > <bean:write name="examCategoryLevelMappingVO" property="levelType.name"/></td>
								<td ><bean:write name="examCategoryLevelMappingVO" property="numberQuestions"/></td>
								<input type="hidden" name="question_category_id" id="question_category_id<%=index%>" value="<bean:write name="examCategoryLevelMappingVO" property="categoryType.id"/>">
								<input type="hidden" name="question_level_id" id="question_level_id<%=index%>" value="<bean:write name="examCategoryLevelMappingVO" property="levelType.id"/>">
								<input type="hidden" name="question_count" id="question_count" value="<bean:write name="examCategoryLevelMappingVO" property="numberQuestions"/>">
								<script language="javascript">
									addedQuestionArray[<bean:write name="examCategoryLevelMappingVO" property="categoryType.id"/><bean:write name="examCategoryLevelMappingVO" property="levelType.id"/>]= "added" ;
									questionRowID++;
								</script>

							</tr>
							<%index++;%>
							</logic:iterate>							
						</table>
						</td>
					</tr>
							</logic:notEqual>
							
							
					<tr>
						<td colspan="3" align="center" valign="top" >
						<logic:equal name="examForm" property="screen_type" value="">
						<table width="550" cellspacing="0" cellpadding="0" id="examList" class="tbletextTemp" style="display:none;">
							<tr id="refRow">
							<td >Category</td>
							<td >Question Level</td>
							<td >Number Of Ques.</td>
						</tr>
						</table>
						</logic:equal>
						</td>
						<td></td>
					</tr>
					<tr>
						<td colspan="4" valign="top"  bgcolor="#CCCCCC"><img src="images/zero.gif" width="1" height="1" /></td>
					</tr>
					<tr>
						<td height="25" colspan="4" align="center" valign="top" >&nbsp;</td>
					</tr>
					<tr>
						<logic:equal name="examForm" property="screen_type" value="Edit">
							<td height="25" colspan="4" align="center" valign="top">
								<input type="button" class="imageButton" value="Update" onClick="javascript:fnUpdate()">
							</td>
						</logic:equal>
						<logic:equal name="examForm" property="screen_type" value="">
							<td height="25" colspan="4" align="center" valign="top">
								<input type="button" class="imageButton" value="Submit" onClick="javascript:fnSubmit()">
							</td>
						</logic:equal>
					</tr>
					<tr>
						<td height="25" colspan="4" align="center" valign="top" >&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	
	<table width="550" border="0" cellspacing="0" cellpadding="0" class="tbletext" id="questionRow" style="display:none;">
	<tr>
							<td ><img id="rowId" src="images/minus.gif" onClick="javascript:removeRow(this);"/> Category</td><td > QuestionLevel</td><td >NumberOfQuestion
							<div id="questionRowData">
							<input type="hidden" name="question_category_id" id="question_category_id_remove_id" value="categoryValue">
							<input type="hidden" name="question_level_id" id="question_level_id_remove_id" value="levelValue">
							<input type="hidden" name="question_count" id="question_count" value="questionCount">
							</div>
							</td>
						</tr>
						</table>
	
	<logic:equal name="examForm" property="screen_type" value="View">
		<script language="JavaScript">	
			var elements = document.forms[0].elements;
			var type = "";
			for(j=0;j<elements.length;j++){
				type = elements[j].type;
				if(type == 'text' || type == 'select-one' || type == 'radio' || type == 'checkbox' || type == 'button' || type == 'textarea') {
					elements[j].disabled=true;
				}
			}
		</script>
	</logic:equal>
	<logic:equal name="examForm" property="is_updatable" value="false">
		<script language="JavaScript">	
		document.getElementById("exam_name").readonly = true;
		document.getElementById("exam_description").readonly = true;
		document.getElementById("exam_time_hr").disabled = true;
		document.getElementById("exam_time_min").disabled = true;
		
		</script>
	</logic:equal>
</html:form>